<template>
  <div class="container">
    <svg
      class="morphing-demo"
      width="591"
      height="601"
      viewBox="0 0 591 601"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <polygon
        stroke="none"
        fill="#98D5CA"
        points="233 0,533.5 83.5,484.961 297,563 411,260 451,0.0391846 297,209 219,233 0"
      ></polygon>
    </svg>
  </div>
</template>

<script>
export default {
  mounted() {
    this.anime({
      targets: ".morphing-demo polygon",
      points: [
        {
          value:
            "259.173 0.0975342,514.671 11.8193,466.128 231,543 413,259.173 263,0 420,94.1729 41.0975,259.173 0.0975342",
        },
        {
          value:
            "253 110,514.671 0.819275,466.128 220,543 253,0 409,94.1729 30.0975,253 110",
        },
        {
          value:
            "306.827 0.902466,381 154,636 249,565 494,249 534,0.827087 460.902,181.827 292.902,95 82,306.827 0.902466",
        },
        {
          value:
            "306.827 0.902466,453 345,636 249,565 739,0.827087 460.902,181.827 292.902,306.827 0.902466",
        },
      ],
      easing: "easeOutQuad",
      duration: 5000,
      loop: true,
    });
  },
};
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>